<template>
  <div>
    <el-form label-width="90px" label-position="left" size="small">
      <div style="padding: 10px 10px 0">
        <el-form-item label="ID">
          <span>{{ store.currentPen.id }}</span>
        </el-form-item>
        <el-form-item label="名称">
          <!-- <span>{{ store.currentPen.name }}</span> -->
           <el-input v-model="store.currentPen.name" placeholder="请输入名称" />
        </el-form-item>
      </div>
      <el-collapse v-model="activeName">
        <!-- <el-collapse-item name="tags" title="数据绑定">
        <div style="padding: 0 10px">
          <div class="tag-input-wrapper">
            <el-select popper-class="editor-container-scss"  v-model="tags">
              <el-option
                v-for="item in equipmentOptions"
                :key="item.equipmentId"
                :label="item.name"
                :value="item.equipmentId"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </el-collapse-item> -->

        <el-collapse-item name="data" title="数据绑定">
          <div style="padding: 0 10px">
            <el-form-item :label="'标签' + (index + 1)" v-for="(item, index) in store.currentPen.tags" :key="index">
              <span>{{ item }}</span>
            </el-form-item>
            <el-button type="primary" style="width: 100%" @click="drawer = true">添加数据</el-button>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <el-drawer v-model="drawer" title="数据绑定" direction="rtl" :before-close="handleClose" append-to-body size="1000">
      <div class="editor-container-scss" style="padding: 0 10px">
        <div>id: {{ store.currentPen.id }}</div>
        <div>绑定数据<el-button @click="addBindData"> 添加 </el-button></div>
        <!-- <div> <el-text type="warning">仅可设置一种展示方式</el-text></div> -->
        <div> <el-text type="warning">仅可设置一个文本展示</el-text></div>
        <!-- <div> <el-text type="danger">仅可设置一个图表类型展示(折线/柱状图必须设置x轴坐标数据)</el-text></div> -->
        <!-- <div> <el-text type="danger">仅可设置一个图表类型展示</el-text></div> -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="展示方式">
            <template #default="scope">
              <el-select popper-class="editor-container-scss" v-model="scope.row.showType" placeholder="Select"
                size="small" style="width: 180px" @change="showTypeChange($event, scope.row)">
                <el-option v-for="item in showTypes" :key="item.value" :label="item.label" :value="item.value"
                  :disabled="showTypesIsDisabled(item)" />
              </el-select>
              form:{{ store.currentPen.form ? store.currentPen.form[tableData.indexOf(scope.row)] : '' }}
            </template>
          </el-table-column>
          <el-table-column label="绑定数据">
            <template #default="scope">
              <el-cascader popper-class="editor-container-scss" v-if="scope.row.showType != 'dataX'"
                v-model="scope.row.bindData" :options="options" :disabled="!scope.row.showType"
                :props="{ multiple: scope.row.showType == 'dataY' && store.currentPen.echarts?.name != 'dashboardChart', expandTrigger: 'hover', lazy: true, lazyLoad }"
                @change="handleChange(scope.row)" />
              <el-cascader popper-class="editor-container-scss" v-else v-model="scope.row.showDate" :options="showDates"
                :disabled="!scope.row.showType" :props="{ expandTrigger: 'hover' }"
                @change="showDateChange(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
              <!-- <div class="flex justify-center"> -->
              <el-button v-if="scope.row.showType == 'events' && scope.row.bindData"
                @click="showInnerDrawer(scope.row)">
                设置 </el-button>
              <el-button @click="removeBindData(scope.row)"> 删除 </el-button>
              <!-- </div> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-drawer v-model="innerDrawer" title="设置事件" :append-to-body="true" :before-close="handleClose">
        <div class="editor-container-scss" style="padding: 10px">
          <el-button type="primary" style="width: 100%" @click="addEvent">添加事件</el-button>
        </div>
        <el-collapse v-model="activeName" v-if="penEvents && penEvents.length">
          <el-collapse-item v-for="(evt, index) in penEvents" :key="index" :name="`collapse${index}`"
            v-show="evt.where?.key == showBindData">
            <template #title>
              <span>{{ `事件${index + 1}` }}</span>
              <i class="collapse-delete-icon t-icon t-shanchu--" @click.stop="deleteEvent(evt)"></i>
            </template>
            <el-form label-width="90px" label-position="left">
              <el-form-item label="事件行为">
                <el-select popper-class="editor-container-scss" v-model="evt['action']" clearable
                  @change="onChangeAction($event, evt)">
                  <el-option v-for="item in eventActionOptions" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <template v-if="evt['action'] === EventAction.SetProps">
                <div class="set-props-wrapper">
                  <div class="set-props-header props-grid">
                    <div class="column">Key</div>
                    <div class="column">Value</div>
                    <div class="props-icon icon" @click.stop="addProp(evt)">
                      <el-link :icon="Plus" :underline="false"></el-link>
                    </div>
                  </div>
                  <div class="set-props-content">
                    <div class="row props-grid" v-for="(row, idx) in evt.setProps" :key="idx">
                      <div>
                        <el-select popper-class="editor-container-scss" class="row-input" v-model="row.key" clearable
                          @change="onSelect(evt, row)" style="width:100%">
                          <el-option v-for="item in propsOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </div>
                      <div>
                        <div v-if="row.formOption">
                          <el-input-number controls-position="right" :max="row.formOption.max" :min="row.formOption.min"
                            :step="row.formOption.step" style="max-width: 87px"
                            v-if="row.formOption.type === 'input-number'" @input="onPropChange(evt)" class="row-input"
                            v-model="row.value"></el-input-number>
                          <el-color-picker show-alpha :predefine="ColorPredefine" v-if="row.formOption.type === 'color'"
                            @change="onPropChange(evt)" class="row-input" v-model="row.value"></el-color-picker>
                          <el-switch v-if="row.formOption.type === 'switch'" @input="onPropChange(evt)"
                            v-model="row.value"></el-switch>
                          <el-input v-if="row.formOption.type === 'input'" @input="onPropChange(evt)" class="row-input"
                            v-model="row.value"></el-input>
                        </div>
                      </div>
                      <div class="props-icon icon" @click.stop="deleteProp(evt, idx)">
                        <el-link @click.stop="deleteProp(evt, idx)" :icon="Delete" :underline="false"></el-link>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              <el-form-item label="触发条件" v-if="evt.where">
                <el-select popper-class="editor-container-scss" v-model="evt.where.type" clearable>
                  <el-option v-for="item in whereTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <template v-if="evt.where && evt.where.type === 'comparison'">
                <el-form-item label="属性">
                  <el-input v-model="evt.where.key" disabled></el-input>
                </el-form-item>

                <el-form-item label="比较条件">
                  <el-select popper-class="editor-container-scss" v-model="evt.where.comparison" clearable>
                    <el-option v-for="item in comparisonOptions" :key="item.value" :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  {{ comparisonOptionsInfo[evt.where.comparison] }}
                </el-form-item>

                <el-form-item label="属性值">
                  <el-input v-model="evt.where.value"></el-input>
                </el-form-item>
              </template>
            </el-form>
          </el-collapse-item>
        </el-collapse>
      </el-drawer>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { useTopologyEditorStore } from '@/store/modules/topology-editor'
import { ElMessageBox } from 'element-plus'
import type { Option } from 'element-plus/es/components/select-v2/src/select.types'
import { EventAction, type Event } from '@meta2d/core'
import { AnimationsEventAction, ColorPredefine } from "@/components/TopologyEditor/constant";
import { Delete, Plus } from "@element-plus/icons-vue";
// import { inspectiondevice } from '@/api/mokeapi'
// import { getAlarmFeild } from '@/api/models'
declare interface CustomEvent extends Event {
  setProps: Array<{ key: string | undefined; value: string | undefined, formOption: any }> | null
}
declare const window: any // eslint-disable-line
defineOptions({
  name: 'EditorPropsPenData'
})
const router = useRouter()
const innerDrawer = ref(false)
const store = useTopologyEditorStore()
let showDate = ''
const tableData = computed({
  get: () => {
    return store.currentPen.bindDatas
    // return store.currentPen.form
  },
  set: (val) => {
    store.currentPen.bindDatas = val
    // val[0].dataIds.dataId = store.currentPen.id + '-' + val.bindData[0] + '-' + val.bindData[1]
    // val[0].key = val.bindData[0] + '-' + val.bindData[1]
    // store.currentPen.form = val
    // window.meta2d.initBindDatas()
  }
})
const props = {
  expandTrigger: 'hover' as const
}
const showBindData = ref('')
const activeName = ref(['tags', 'data'])
const equipmentOptions = reactive([
  {
    equipmentId: '1',
    name: 'echarts折线/柱状图'
  },
  {
    equipmentId: '2',
    name: 'echarts饼图'
  },
  {
    equipmentId: '3',
    name: 'echarts仪表盘'
  }
])
const drawer = ref(false)
const options = ref([] as any[])
const showTypes = [
  { value: 'text', label: '文本' },
  { value: 'events', label: '事件' },
  // { value: 'dataX', label: 'x轴(dataX)' },
  { value: 'dataY', label: '图表' },
  { value: 'progress', label: '进度值', }
  // { value: 'echarts2', label: '饼图(echarts)' },
  // { value: 'dashboardChart', label: '仪表盘(echarts)' },
]
const showDates = [
  { value: 'years', label: '年' },
  { value: 'months', label: '月' },
  { value: 'days', label: '日' },
]
const tags = computed({
  get: () => {
    return store.currentPen.tags ? store.currentPen.tags[0] : undefined
    // return store.currentPen.form ? store.currentPen.form![0].dataIds!.dataId : undefined
  },
  set: (val) => {
    store.currentPen.tags = [val ? val : '']
    // store.currentPen.form = [
    //   {
    //     key: "textColor",
    //     dataIds: {
    //       dataId: val ? val : '',
    //       name: "",   // 显示名称，非必要
    //     },
    //   },
    // ]
    // window.meta2d.initBindDatas();
  }
})
const penEvents = computed({
  get() {
    return (store.currentPen.events as CustomEvent[]) || []
  },
  set(val: CustomEvent[]) {
    store.currentPen.events = val
    console.log(2, store.currentPen)
  }
})
const eventActionOptions: Option[] = [
  // { value: EventAction.Link, label: '打开链接  ' },
  { value: EventAction.SetProps, label: '更改属性' },
  { value: EventAction.StartAnimate, label: '执行动画' },
  // { value: EventAction.PauseAnimate, label: '暂停动画' },
  { value: EventAction.StopAnimate, label: '停止动画' }
  // { value: EventAction.JS, label: '执行JS代码' },
  // { value: EventAction.GlobalFn, label: '执行全局函数' },
  // { value: EventAction.Emit, label: '发送消息' },
  // { value: EventAction.StartVideo, label: '播放视频' },
  // { value: EventAction.PauseVideo, label: '暂停视频' },
  // { value: EventAction.StopVideo, label: '停止视频' },
  // { value: EventAction.SendPropData, label: '发送图元数据' }
]
const whereTypeOptions: Option[] = [
  { value: '', label: '无' },
  { value: 'comparison', label: '条件判断' }
  // { value: 'fnJs', label: '自定义判断' }
]
const comparisonOptions: Option[] = [
  { value: '==', label: '等于' },
  { value: '!=', label: '不等于' },
  { value: '>', label: '大于' },
  { value: '>=', label: '大于等于' },
  { value: '<', label: '小于' },
  { value: '<=', label: '小于等于' },
  { value: '[)', label: '介于' },
  { value: '![)', label: '不介于' },
  { value: '[]', label: '属于' },
  { value: '![]', label: '不属于' }
]
const comparisonOptionsInfo = {
  '[)': '介于：格式 [a,b] : a <= x <= b , (a,b): a < x < b , (a,b]:a < x <= b , [a,b):a <= x < b',
  '![)': '不介于：格式同介于，判断结果相反',
  '[]': '属于:格式 [a,b,c..d,e] ,当x = a,b,e或c <= x <= d时条件成立',
  '![]': '不属于：格式同属于，判断结果相反'
}
const propsOptions: Option[] = [
  { value: 'text', label: '文本', type: 'input' },
  { value: 'background', label: '背景颜色', type: 'color' },
  { value: 'color', label: '颜色', type: 'color' },
  { value: 'width', label: '宽度', type: 'input-number', min: 0, max: 9999, step: 1 },
  { value: 'height', label: '高度', type: 'input-number', min: 0, max: 9999, step: 1 },
  { value: 'visible', label: '显示', type: 'switch', min: 0, max: 3, step: 0.1 },
  { value: 'progress', label: '进度值', type: 'input-number', min: 0, max: 1, step: 0.1 },
  { value: 'value', label: '值', type: 'input' },
  { value: 'showChild', label: '状态', type: 'input-number', min: 0, max: 9999, step: 1 }
]
onMounted(() => {
  // 获取项目下所有设备列表
  // inspectiondevice({
  //   projectId: router.currentRoute.value.query.projectId
  // }).then((res: any) => {
  //   res.result.forEach((item) => {
  //     options.value.push({
  //       value: item.deviceId,
  //       label: item.deviceName,
  //       modelId: item.modelId
  //     })
  //   })
  // })
  let res = [{
    "deviceId": 1,
    "deviceName": "sads",
    modelId: 1
  }, {
    "deviceId": 2,
    "deviceName": "das",
    modelId: 2
  }]
  res.forEach((item) => {
    options.value.push({
      value: item.deviceId,
      label: item.deviceName,
      modelId: item.modelId
    })
  })
})
function lazyLoad(node, resolve) {
  let res = [{
    "modelRuleId": 1,
    "fieldName": "开关"
  }, {
    "modelRuleId": 2,
    "fieldName": "电流"
  }, {
    "modelRuleId": 3,
    "fieldName": "电压"
  }]
  const nodes = res.map((item) => ({
    value: item.modelRuleId,
    label: item.fieldName,
    leaf: true,
  }))
  options.value.forEach((item) => {
    if (item.modelId === node.data.modelId) {
      item.children = nodes
    }
  })
  resolve(nodes)
  // 懒加载追加设备模型中的数据
  // getAlarmFeild({
  //   modelId: node.data.modelId
  // }).then((res: any) => {
  //   if (res.result.length === 0) {
  //     const nodes = [{
  //       value: -1,
  //       label: '暂无数据',
  //       disabled: true,
  //       leaf: true,
  //     }]
  //     options.value.forEach((item) => {
  //       if (item.modelId === node.data.modelId) {
  //         item.children = nodes
  //       }
  //     })
  //     resolve(nodes)
  //   } else {
  //     const nodes = res.result.map((item) => ({
  //       value: item.modelRuleId,
  //       label: item.fieldName,
  //       leaf: true,
  //     }))
  //     options.value.forEach((item) => {
  //       if (item.modelId === node.data.modelId) {
  //         item.children = nodes
  //       }
  //     })
  //     resolve(nodes)
  //   }

  // })
}
function showInnerDrawer(bindData: any) {
  // showBindData.value = store.currentPen.tags![tableData.value.indexOf(bindData)]
  showBindData.value = store.currentPen.form![tableData.value.indexOf(bindData)].key
  innerDrawer.value = true
}
function handleClose(done: () => void) {
  // ElMessageBox.confirm('确定关闭？', undefined, {
  //   confirmButtonText: '确定',
  //   cancelButtonText: '取消',
  //   type: 'warning',
  //   draggable: true
  // })
  //   .then(() => {
  //     done()
  //   })
  //   .catch(() => {
  //     // catch error
  //   })
  done()
}
function handleChange(value: any) {
  let index = tableData.value.indexOf(value)
  // if (store.currentPen.tags) {
  //   // store.currentPen.tags[tableData.value.indexOf(value)] = store.currentPen.id + '-' + value.bindData[0] + '-' + value.bindData[1] + '-' + new Date().getTime()
  //   store.currentPen.tags[tableData.value.indexOf(value)] = value.bindData[0] + '-' + value.bindData[1] + (value.showType ? '-' + value.showType : '')
  // } else {
  //   store.currentPen.tags = [
  //     // store.currentPen.id + '-' + value.bindData[0] + '-' + value.bindData[1] + '-' + new Date().getTime()
  //     value.bindData[0] + '-' + value.bindData[1] + (value.showType ? '-' + value.showType : '')
  //   ]
  // }
  if (store.currentPen.form) {

    if (value.showType != 'dataY') {
      store.currentPen.form[index] = {
        key: value.showType == 'events'
          ? value.bindData[0] + '-' + value.bindData[1] + '-' + value.showType
          : value.showType,
        dataIds: {
          dataId: value.bindData[0] + '-' + value.bindData[1],
          name: getOptionName(value.bindData)
        }
      }
      window.meta2d.initBindDatas()
    } else {
      let dataIds = [] as any
      let xLines = [] as any[]
      let pieDatas = [] as any[]
      if (store.currentPen.name == "echarts") {
        if (store.currentPen.echarts.name != "dashboardChart") {
          value.bindData.forEach((item: any, _index: any) => {
            // dataIds.push({ dataId: item[0] + '-' + item[1] + (value.showType ? '-' + value.showType : '') + '-' + showDate, name: item[0] + '-' + item[1] + (value.showType ? '-' + value.showType : '') + '-' + showDate })
            dataIds.push({ dataId: item[0] + '-' + item[1], name: getOptionName(item) })
            xLines.push(getOptionName(item))
            pieDatas.push({ name: getOptionName(item), value: 0 })
          })
        } else {
          dataIds = [{ dataId: value.bindData[0] + '-' + value.bindData[1], name: getOptionName(value.bindData).split('-')[1] }]
        }
        if (store.currentPen.echarts.name == "lineChart" || store.currentPen.echarts.name == "barChart") {
          window.meta2d.setValue({
            id: store.currentPen.id,
            dataX: xLines,
          });
        } else if (store.currentPen.echarts.name == "pieChart") {
          window.meta2d.setValue({
            id: store.currentPen.id,
            dataY: pieDatas,
          });
        } else if (store.currentPen.echarts.name == "dashboardChart") {
          let name = getOptionName(value.bindData).split('-')
          store.currentPen.echarts.option.series[0].name = name[0]
          store.currentPen.echarts.option.series[0].data[0].name = name[1]
          window.meta2d.setValue(store.currentPen)
        }
        store.currentPen.form[index] = { key: value.showType ? value.showType + '' : '', dataIds: dataIds }
        window.meta2d.initBindDatas()
      }
    }
  } else {
    store.currentPen.form = []
    if (value.showType != 'dataY') {
      store.currentPen.form[index] = { key: value.showType == 'events' ? value.bindData[0] + '-' + value.bindData[1] + '-' + value.showType : value.showType, dataIds: { dataId: value.bindData[0] + '-' + value.bindData[1], name: '' } }
      window.meta2d.initBindDatas()
    } else {
      let dataIds = [] as any[]
      let xLines = [] as any[]
      let pieDatas = [] as any[]
      if (store.currentPen.name == "echarts") {
        value.bindData.forEach((item: any, _index: any) => {
          dataIds.push({ dataId: item[0] + '-' + item[1], name: getOptionName(item) })
          xLines.push(getOptionName(item))
          pieDatas.push({ name: getOptionName(item), value: 0 })
        })
        if (store.currentPen.echarts.name == "lineChart" || store.currentPen.echarts.name == "barChart") {
          window.meta2d.setValue({
            id: store.currentPen.id,
            dataX: xLines,
          });
        } else if (store.currentPen.echarts.name == "pieChart") {
          window.meta2d.setValue({
            id: store.currentPen.id,
            dataY: pieDatas,
          });
        } else if (store.currentPen.echarts.name == "dashboardChart") {
          let name = getOptionName(value.bindData).split('-')
          store.currentPen.echarts.option.series[0].name = name[0]
          store.currentPen.echarts.option.series[0].data[0].name = name[1]
          window.meta2d.setValue(store.currentPen)
        }
        store.currentPen.form[0] = { key: value.showType ? value.showType + '' : '', dataIds: dataIds }
        window.meta2d.initBindDatas()
      }
    }
  }

}
function getOptionName(bindData: number[]) {
  return options.value.find((item: any) => item.value == bindData[0]).label + '-' +
    options.value.find((item: any) => item.value == bindData[0]).children.find((item: any) => item.value == bindData[1]).label

}
function showTypeChange(e: any, value: any) {
  value.bindData = null
  // e = e == 'dashboardChart' ? 'echarts.option.series[0].data[0].value' : e
  if (store.currentPen.form) {
    store.currentPen.form[tableData.value.indexOf(value)] = { key: e, dataIds: { dataId: '', name: '' } }
  } else {
    store.currentPen.form = [{ key: e, dataIds: { dataId: '', name: '' } }]
  }
}
function showTypesIsDisabled(item: any) {
  // if (item.value == 'dataY' && (!isHaveXlineData() || isHaveEcharts())) {
  if (item.value == 'dataY' && isHaveEcharts()) {
    return true
  } else if (item.value == 'echarts2' && isHaveEcharts()) {
    return true
  } else if (item.value == 'dashboardChart' && isHaveEcharts()) {
    return true
  } else if (item.value == 'dataX' && isHaveXline()) {
    return true
  } else if (item.value == 'text' && isHaveText()) {
    return true
  } else {
    return false
  }
}
function isHaveEcharts() {
  return store.currentPen.bindDatas.some((item: any) => item.showType == "dataY" || item.showType == "echarts2" || item.showType == "dashboardChart")
}
function isHaveXline() {
  return store.currentPen.bindDatas.some((item: any) => item.showType == "dataX")
}
function isHaveXlineData() {
  return store.currentPen.bindDatas.some((item: any) => (item.showType == "dataX" && item.showDate))
}
function isHaveText() {
  return store.currentPen.bindDatas.some((item: any) => item.showType == "text")
}
function showDateChange(value: any) {
  value.bindData = null
  let index = tableData.value.indexOf(value)
  if (store.currentPen.form) {
    store.currentPen.form[index] = { key: 'dataX', dataIds: { dataId: value.showDate[0], name: 'dataX' } }
    console.log(store.currentPen.form[index])
  } else {
    store.currentPen.form = [{ key: 'dataX', dataIds: { dataId: value.showDate[0], name: 'dataX' } }]
  }
  showDate = value.showDate[0]
  window.meta2d.initBindDatas()
  removeYLine()
}
function addBindData() {
  store.currentPen.bindDatas == null ? (store.currentPen.bindDatas = [{}]) : store.currentPen.bindDatas.push({})
  // store.currentPen.form == null
  //   ? (store.currentPen.form = [{ key: '', dataIds: { dataId: '', name: '' } }])
  //   : store.currentPen.form.push({ key: '', dataIds: { dataId: '', name: '' } })
  // window.meta2d.initBindDatas()
}
function removeBindData(item: any) {
  const index = store.currentPen.bindDatas.indexOf(item)
  if (index !== -1) {
    store.currentPen.bindDatas.splice(index, 1)
    store.currentPen.form?.splice(index, 1)
  }
  if (item.showType == "dataX") {
    removeYLine()
  }
  if (item.showType == 'dataY' || item.showType == 'echarts2' || item.showType == 'dashboardChart') {
  }
}
function removeYLine() {
  store.currentPen.form = store.currentPen.form.filter((item: any) => {
    if (item.key != "dataY") {
      return item
    }
  })
  store.currentPen.bindDatas = store.currentPen.bindDatas.filter((item: any) => {
    if (item.showType != "dataY") {
      return item
    }
  })
}
function addEvent() {
  const eventObj = {
    action: '',
    where: {
      type: 'comparison',
      value: null,
      key: showBindData.value,
      comparison: null
    },
    name: 'valueUpdate',
    value: null,
    fn: null,
    setProps: null
  }
  const events: CustomEvent[] = store.currentPen.events ? (store.currentPen.events as CustomEvent[]) : []
  events.push(eventObj as unknown as CustomEvent)
  penEvents.value = events
}
function deleteEvent(item: any) {
  store.currentPen.events?.splice(store.currentPen.events?.indexOf(item), 1)
}
function onChangeAction(event: EventAction, evt: CustomEvent) {
  evt.params = undefined
  evt.value = null
  evt.setProps = event === EventAction.SetProps ? [{ key: undefined, value: undefined }] : null
}
function addProp(evt: CustomEvent) {
  const propObj = { key: undefined, value: undefined }
  evt.setProps?.push(propObj)
}
function onPropChange(evt: CustomEvent) {
  const valueObj: Record<string, string> = {}
  evt.setProps?.forEach((prop) => {
    valueObj[prop.key as string] = prop.value as string
  })
  evt.value = valueObj
}
function deleteProp(evt: CustomEvent, idx: number) {
  evt?.setProps?.splice(idx, 1)
}
function onSelect(evt: CustomEvent, row) {
  row.value = undefined
  const valueObj: Record<string, string> = {}
  evt.setProps?.forEach((prop) => {
    prop.formOption = propsOptions.find(item => item.value === prop.key)
    valueObj[prop.key as string] = prop.value as string
  })
  evt.value = valueObj
}
</script>

<style lang="scss" scoped>
:deep(.el-collapse-item__header) {
  background-color: transparent;
  padding: 0 10px;
  position: relative;
}

.collapse-delete-icon {
  position: absolute;
  right: 35px;
  top: 0;

  &:hover {
    color: #409eff;
  }
}

.props-icon {
  width: 30px !important;
}

.set-props-wrapper {
  margin-bottom: 18px;

  .set-props-header {
    height: 36px;
    font-size: 12px;
    line-height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;

    .column {
      flex: 1;
      text-align: center;
      font-size: 14px;
      color: #afafaf;
    }

    .icon {
      flex: 0 30px;
      width: 0;
      font-size: 14px;
      color: #fff;
      text-align: center;
      cursor: pointer;

      &:hover {
        color: #409eff;
      }
    }
  }

  .set-props-content {
    .row {
      //display: flex;
      //justify-content: center;
      //align-items: center;
      display: grid;
      grid-template-columns: 2fr 2fr 0fr;
      grid-gap: 5px;
      // justify-items: center;
      margin-bottom: 2px;

      .row-input {
        flex: 1;

        :deep(.el-input__inner) {
          border: 0;
        }

        &+.row-input {
          margin-left: 2px;
        }
      }

      .icon {
        flex: 0 30px;
        width: 0;
        font-size: 14px;
        color: #fff;
        text-align: center;
        cursor: pointer;

        &:hover {
          color: #409eff;
        }
      }
    }
  }
}
</style>
